<!DOCTYPE html>
<html>
	<head>
		<title i18n>乐吾乐 Meta2d</title>
		<meta charset="UTF-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			* {
				/* 取消点击背景色显示蓝色 */
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			}

			body {
				margin: 0px;
			}

			#meta2d {}

			.header {
				position: fixed;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				z-index: 10000;
				width: 100%;
				color: #fff;
				padding: 40px 40px;
				box-sizing: border-box;
			}

			#btn {

				color: #2df6ec;
				background-color: #0A2843;
				border-radius: 5px;
			}

			span {
				color: #2df6ec;
			}

			button:hover {}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="js/@topology/meta2d.js"></script>
		<script type="text/javascript" src="js/@topology/uni.webView.js"></script>
		<script type="text/javascript" src="js/handleTopology.js"></script>
		<script type="text/javascript" src="js/topologyUtil.js"></script>
		<div style="height:100vh;width:100vw;">

			<div class="header">
				<span id="back">
					< 返回</span>
						<button id="btn">保存</button>
			</div>
			<div id="meta2d" style="height:100%;width:100%;"></div>
		</div>

		<script>
			var paramURl = {};
			let url = decodeURIComponent(location.search.substring(1));
			url.split('&').forEach(item => {
				var kv = item.split('=')
				paramURl[kv[0]] = kv[1]
			});
			console.log('url', paramURl)
			var graph;
			var env = {};
		
			document.addEventListener('UniAppJSBridgeReady', function(e) {
				
				uni.getEnv((res) => {
					env = res
				})


			});
			document.getElementById("btn").addEventListener("click", function() {
				postMessage({
					type: "save",
					data: JSON.stringify(allNodes)
				})
			})
			document.getElementById("back").addEventListener("click", function() {
				console.log('sss----back')
				postMessage({
					type: "back",
				})
			})
				readFile(paramURl.processId)
			function readFile(fileName) {
				console.log('ssssss--------',fileName)
				let fileURL = `topol/${fileName}.json`
				let xhr = new XMLHttpRequest()
				xhr.open('GET', fileURL, true)
				xhr.send()
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						const response = JSON.parse(xhr.responseText)
						console.log('ssssss--------')
						createFlow(response)
 
					}
				}
			};

			function createFlow(param) {
				graph = new Meta2d('meta2d', {
					"background": "#000000"
				});
				graph.open(param);
				graph.fitView();
				graph.lock(1);
				// graph.translate(0, -66)
				graph.on("*", topoEvent);
				res = handleLineData(param);
				window.testdata = res;
			};

			function topoEvent(event, data) {
				let pen = (data && data.pen) || "";
				if (pen && paramURl.routefrom === 'undefined') {
					if (event == "click" || event == "dblclick") {
						if (pen.tags.includes("lcline")) {
							this.handlerline(pen);
						} else if (event == "dblclick") {
							handlerdblclick(pen)
							// this[`handler${event}`](pen);
						}
					}
				}
			};

			function handlerline(data) {
				clearTimeout(this.timer);
				this.timer = setTimeout(() => {
					// 对于已完成和不需要再处理的分支，直接返回
					if (this.allNodes[data.id] && this.allNodes[data.id].status <= 1) {
						return;
					}
					// 当前线， 前序节点，后续节点（多个），后续线段
					let {
						currentLine,
						prevNode,
						nextNode,
						nextLines,
						lastNode
					} =
					clickLine(graph, data);
					let prevNodeId =
						prevNode && (prevNode.id || (prevNode[0] && prevNode[0].id));
					let lastNodeId =
						lastNode && (lastNode.id || (lastNode[0] && lastNode[0].id));
					// 判断下个节点是否为最后节点，若为最后节点，连线设为黄色可撤销；否则设为绿色不可撤销
					if (nextNode == lastNode) {
						this.setOtherLineStatus(currentLine);
						if (prevNodeId) {
							this.allNodes[prevNodeId] = {
								...this.allNodes[prevNodeId],
								status: 1,
							};
						}
						this.allNodes[currentLine.id] = {
							...this.allNodes[currentLine.id],
							status: 1, // 当前连线变成已完成
						};
						if (lastNodeId) {
							this.allNodes[lastNodeId] = {
								...this.allNodes[lastNodeId],
								status: 2,
							};
						}
					} else {
						// 其他连线
						this.setOtherLineStatus(currentLine);
						// 后续节点、后续连线
						this.setNextItemStatus(nextNode, nextLines);
						// 当前节点
						if (prevNodeId) {
							this.allNodes[prevNodeId] = {
								...this.allNodes[prevNodeId],
								status: 1,
							};
						}
						// 当前连线
						this.allNodes[currentLine.id] = {
							...this.allNodes[currentLine.id],
							status: 1,
						};
					}
					this.updateStatus(graph);
				}, 400);
			};

			function handlerdblclick(data) {
				clearTimeout(this.timer);
				clearTimeout(this.nodeTimer);
				// if (this.allNodes[data.id] && this.allNodes[data.id].status == 1) {
				//   return;
				// }
				let tags = data && data.tags;
				if (tags) {
					if (tags.includes("lcline")) {
						// this.handlerdblLine(data);
					} else if (tags.includes("lcnode")) {
						this.handlerdblNode(data);
					}
				}
				this.updateStatus(graph);
			};

			function handlerdblNode(data) {
				if (data.tags.includes("lc0000")) return;
				if (this.allNodes[data.id] && this.allNodes[data.id].status == 2) {
					// 1. 获取当前节点即当前备选连接线，并置为灰色
					this.allNodes[data.id].status = 0;
					this.linesOption.forEach((line) => {
						if (this.allNodes[line]) this.allNodes[line].status = 0;
					});
					let nextLines = getNextLineObj(graph, data.id);
					nextLines &&
						nextLines.forEach((item) => {
							this.allNodes[item.id].status = 0;
						});
					this.linesOption = [];
					// 2. 获取当前节点的前序节点
					let prevNode = this.getPrevNodeObj(graph, data.id);
					// 3. 获取前序节点的备选连接线
					let prevNodeId =
						prevNode && (prevNode.id || (prevNode[0] && prevNode[0].id));
					let {
						specifiedItem,
						specifiedRelativedItems
					} = getSpecifiedItems(
						graph,
						prevNodeId
					);
					let specifiedId =
						specifiedItem &&
						(specifiedItem.id || (specifiedItem[0] && specifiedItem[0].id));
					this.allNodes[specifiedId].status = 2;
					specifiedRelativedItems &&
						specifiedRelativedItems.forEach((line) => {
							this.linesOption.push(line.id);
							if (this.allNodes[line.id]) {
								this.allNodes[line.id].status = 2;
							} else {
								this.allNodes[line.id] = {
									id: line.id,
									status: 2,
									type: "line",
								};
							}
						});
				}
			};

			function passInit(paramFlow) {
			// console.log('this.almInfo',paramFlow.idK)
					setTimeout(()=> {
						console.log('graph',graph)
						initNodeStatus(graph, [], paramFlow);
						updateStatus(graph);
					}, 800);
	
			}

			function postMessage(param) {
				uni.postMessage({
					data: {
						param: param
					}
				});
				if (env.h5) {
					window.parent.postMessage(param, '*')
				}
			};
		</script>
	</body>
</html>